<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
			.input-group{
				padding: 50px;

			}
			input{
				height: 25px;
				width: 240px;
				border-radius: 8px;
				outline: none;
				padding-left: 5px;
			}
			input:focus{
				border: 2px solid orange;
			}
			button{
				height: 35px;
				width: 55px;
				margin-left: 10px;
				border-radius: 8px;
				outline: none;
				background: #2F79BA;
				color: white;
				font-weight: 600;
				cursor: pointer;
			}
			.tip:before{
				content: '必填，长度为4-16个字符';
				font-size: 14px;
				color: #B2B2B2;
			}
			.warning:before{
				content: '姓名不能为空';
				font-size: 14px;
				color: #f00;
			}
			.success:before{
				content: '名称格式正确';
				font-size: 14px;
				color: #65BC4D;
			}
	</style>
	<script type="text/javascript">
		function isEmpty(value){//验证是否为空
			return value.trim().length == 0 || value == '' ? true : false;
		}

		function validation_length(value, min, max){//验证数据成都是否符合，汉字算2个字符
			var length_count = 0;
			value = value.trim();
			for(var i = 0; i < value.length; i++){
				if((value.charCodeAt(i) < 0) || (value.charCodeAt(i) > 255)){
					length_count +=2;
				}else{
					length_count++;
				}
			}
			if(length_count < min || length_count > max){
				return false
			}else{
				return true;
			}
		}
		window.onload = function(){
			var input = document.getElementsByTagName('input')[0],
					button = document.getElementsByTagName('button')[0],
					div = document.getElementsByTagName('div')[1];
			button.onclick = function(){
				var value = input.value;
				if(isEmpty(value)){
					div.className = 'warning';
					input.style.border = '2px solid red';
					return;
				}
				if(validation_length(value, 4, 16)){
					div.className = 'success';
					input.style.border = '2px solid #65BC4D';
				}else{
					div.className = 'tip';
					input.style.border = '2px solid orange';
				}
			};
		}
		

	</script>
</head>
<body>
	<div class="input-group">
		<label for=""><input type="text"><button type="button">验证</button></label>
		<div class="tip"></div>
	</div>
</body>
</html>